<template>
  <a-modal title="新增数据表" :width="1200" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-divider orientation="left">数据表信息</a-divider>
      <a-form :form="form">
        <a-form-item label="表名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入表名" v-decorator="['name']" />
        </a-form-item>
        <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入描述" style="width: 100%" v-decorator="['description']" />
        </a-form-item>
      </a-form>
    </a-spin>
    <a-spin :spinning="confirmLoading">
      <a-divider orientation="left">数据列信息</a-divider>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-table size="middle" :columns="columnShowColumns" :dataSource="columnInfo" :pagination="false" :loading="false">
            <template slot="dbColumnName" slot-scope="text, record">
              <a-input style="width: 120px"  v-model="record.dbColumnName" />
            </template>
            <template slot="columnDescription" slot-scope="text, record">
              <a-input style="width: 120px" v-model="record.columnDescription" />
            </template>
            <template slot="isPrimarykey" slot-scope="text, record">
              <a-select
                :key="col"
                style="width: 120px"
                placeholder="请选择"
                has-feedback
              >
                <a-select-option v-for="(item,index) in selectData" :key="index" :value="item.value">{{ item.text }}</a-select-option>
              </a-select>
            </template>
            <template slot="isIdentity" slot-scope="text, record">
              <a-select
                :key="col"
                style="width: 120px"
                placeholder="请选择"
                has-feedback
              >
                <a-select-option v-for="(item,index) in selectData" :key="index" :value="item.value">{{ item.text }}</a-select-option>
              </a-select>
            </template>
            <template slot="isNullable" slot-scope="text, record">
              <a-select
                :key="col"
                style="width: 120px"
                placeholder="请选择"
                has-feedback
              >
                <a-select-option v-for="(item,index) in selectData" :key="index" :value="item.value">{{ item.text }}</a-select-option>
              </a-select>
            </template>
            <template slot="dataType" slot-scope="text, record">
              <a-select
                :key="col"
                style="width: 120px"
                placeholder="请选择"
                @change="e => dataTypeHandleChange(e,record.key,col)"
                has-feedback
              >
                <a-select-option v-for="(item,index) in dataTypeSelectData" :key="index" :value="item.value">{{ item.value }}</a-select-option>
              </a-select>
            </template>
            <template slot="length" slot-scope="text, record">
              <a-input-number v-model="record.length" />
            </template>
            <template slot="decimalDigits" slot-scope="text, record">
              <a-input-number v-model="record.decimalDigits" />
            </template>
            <template slot="operation" slot-scope="text, record">
              <a @click="remove(record.key)">删除</a>
            </template>
            
          </a-table>
          <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus"
            @click="addColumn">增行</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
  import {
    tableAdd
  } from '@/api/modular/gen/databaseManage'

  export default {
    data() {
      return {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 15
          }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        selectData:[{
          text:'是',
          value:true
        },{
          text:'否',
          value:false
        }],
        dataTypeSelectData:[
          {
            value:'text',
            hasLength:false,
            hasDecimalDigits:false
          },
          {
            value:'varchar',
            hasLength:true,
            hasDecimalDigits:false
          },{
            value:'nvarchar',
            hasLength:true,
            hasDecimalDigits:false
          },
          {
            value:'char',
            hasLength:true,
            hasDecimalDigits:false
          },{
            value:'nchar',
            hasLength:true,
            hasDecimalDigits:false
          },{
            value:'timestamp',
            hasLength:false,
            hasDecimalDigits:false
          },{
            value:'int',
            hasLength:false,
            hasDecimalDigits:false
          },{
            value:'smallint',
            hasLength:false,
            hasDecimalDigits:false
          },{
            value:'tinyint',
            hasLength:false,
            hasDecimalDigits:false
          },{
            value:'bigint',
            hasLength:false,
            hasDecimalDigits:false
          },{
            value:'bit',
            hasLength:false,
            hasDecimalDigits:false
          },{
            value:'decimal',
            hasLength:true,
            hasDecimalDigits:true
          },{
            value:'datetime',
            hasLength:false,
            hasDecimalDigits:false
          },
        ],
        columnInfo: [],
        columnShowColumns: [{
            title: '字段名',
            dataIndex: 'dbColumnName',
            scopedSlots: {
              customRender: 'dbColumnName'
            }
          }, {
            title: '描述',
            dataIndex: 'columnDescription',
            scopedSlots: {
              customRender: 'columnDescription'
            }
          }, {
            title: '主键',
            dataIndex: 'isPrimarykey',
            scopedSlots: {
              customRender: 'isPrimarykey'
            }
          }, {
            title: '自增',
            dataIndex: 'isIdentity',
            scopedSlots: {
              customRender: 'isIdentity'
            }
          }, {
            title: '类型',
            dataIndex: 'dataType',
            scopedSlots: {
              customRender: 'dataType'
            }
          },
          {
            title: '可空',
            dataIndex: 'isNullable',
            scopedSlots: {
              customRender: 'isNullable'
            }
          },
          {
            title: '长度',
            dataIndex: 'length',
            scopedSlots: {
              customRender: 'length'
            }
          },
          {
            title: '保留几位小数',
            dataIndex: 'decimalDigits',
            scopedSlots: {
              customRender: 'decimalDigits'
            }
          },
        ],
      }
    },
    methods: {
      /**
       * 选择子表单单项触发
       */
      dataTypeHandleChange (value, key, column) {
        const newData = [...this.columnInfo]
        const target = newData.find(item => key === item.key)
        if (target) {
          target[column] = value
          this.data = newData
        }
      },
      addColumn() {
        const length = this.columnInfo.length
        this.columnInfo.push({
          columnDescription: "",
          dataType: "",
          dbColumnName: "",
          decimalDigits: 0,
          isIdentity: false,
          isNullable: false,
          isPrimarykey: true,
          length: 0
        })
      },


      // 初始化方法
      add(record) {
        this.visible = true
      },
      /**
       * 提交表单
       */
      handleSubmit() {
        console.log(this.columnInfo)
        return false;
        const {
          form: {
            validateFields
          }
        } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof(values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            tableAdd(values).then((res) => {
              if (res.success) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('新增失败') // + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel() {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
